/*
*新增私募产品
*AddPrivatePdt.js*/

import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, Icon,Select } from 'antd';
import { connect } from 'react-redux';
import {investStrategy} from '../../../utils/dataConfig';
import style from '../privateManager/home.less';

const Option = Select.Option;
const FormItem = Form.Item;
const AddPrivatePdtForm = Form.create()(
	(props) => {
		const { 
			visible,
			onCancel, 
			onCreate, 
			form,
			tag,
			Cname,
			managerData,
			invData
		} = props;
		console.log('ccccccc',tag)
		const { getFieldDecorator } = form;

			const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };

		return (
			visible ?
				<Modal
					className={`add-AddPrivatePdt`}
					visible={visible}
					title="新增"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
					{/*<Form layout="vertical">*/}
					<Form layout="vertical" className={style.AddPrivatePdt}>
						{/*<FormItem label="备案码">*/}
						<FormItem label="备案码" {...formItemLayout}>
              {getFieldDecorator('recordCode', {
                rules: [{ whitespace: true, message: '请输入备案码' }],
              })(
                <Input />
              )}
            </FormItem>
						{/*<FormItem label="产品名称">*/}
						<FormItem label="产品名称" {...formItemLayout}>
              {getFieldDecorator('productName', {
                rules: [{ required: true,whitespace: true, message: '请输入产品名称' }],
              })(
                <Input />
              )}
            </FormItem>
            {/*<FormItem label="产品Code">*/}
						{/*<FormItem label="产品Code" {...formItemLayout}>
              {getFieldDecorator('productCode', {
                rules: [{ required: true,whitespace: true, message: '请输入产品Code' }],
              })(
                <Input />
              )}
            </FormItem>*/}
            {/*<FormItem label="投资策略">*/}
						<FormItem label="投资策略" {...formItemLayout}>
              {getFieldDecorator('investStrategy', {
                rules: [
								{ required: true, whitespace: true, message: '请选择投资策略!' },
							],
              })(
                <Select>
                	{
                		investStrategy.map((item,i)=><Option value={`${item.value}`} key={i}>{item.name}</Option>)
                	}
                </Select>
              )}
            </FormItem>
            {
            	tag=='privatePdt'?//<FormItem label="所属管理人" >
								<FormItem label="所属管理人" {...formItemLayout}>
	              {getFieldDecorator('companyId', {
	              })(
	                <Select>
										{
											managerData.map((item,i)=><Option value={`${item.id}`} key={i}>{item.name}</Option>)
										}
									</Select>
	              )}
	            </FormItem>://<FormItem label="所属管理人" >
								<FormItem label="所属管理人" {...formItemLayout}>
	              {getFieldDecorator('companyId', {
	                rules: [
									{ required: true, whitespace: true, message: '请输入所属管理人!' },
								],
								initialValue: Cname,
	              })(
	                <Input disabled/>
	              )}
	            </FormItem>
            }
            
					</Form>
				</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	privateData:state.privateMger.privateData,
	managerData:state.privatePdt.managerData,
	investStrategy:state.privateMger.investStrategy
});
const mapDispatchToProps = {
	addPdt: query => ({
		type: 'privateMger/addPdt',
		payload: query || {},
	}),
	addPrivatePdt: query => ({
		type: 'privatePdt/addPrivatePdt',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class AddPrivatePdt extends PureComponent {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-AddPrivatePdt .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}

	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		this.setState({ visible: false });
	}

	handleCreate = () => {
		const form = this.form;
		const {addPdt,privateData,addPrivatePdt,CnameID} = this.props;
		console.log('dddddddd',this.props)
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			console.log('Received values of form:>>>', values);
			if(privateData){
				// privateData.map((item)=>{
				// 	if(item.name == values.companyId){
				// 		values.companyId = item.id;
				// 	}
				// })
				values.companyId = CnameID;
				addPdt({
					...values,
				})
			}else{
				addPrivatePdt({
					...values,
				})
			}
			
			form.resetFields();
			this.setState({ visible: false });
			
		});
	}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		const {tag ,Cname,managerData,investStrategy} = this.props;
		console.log('vvvvvvv',this.props)
		return (
			<div >
				{
					tag=='privatePdt'?<Button type='primary' onClick={this.showModal}>新增</Button>:<a className="addPrivatePdt"
					onClick={this.showModal}><Icon type="plus" />新增私募产品</a>
				}
				
				<AddPrivatePdtForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
					tag={tag}
					Cname={Cname}
					managerData={managerData}
					invData={investStrategy}
				/>
			</div>
		);
	}
}
export default Form.create({
})(AddPrivatePdt);
